<template>
  <div class="wrapper">
    <div class="header">
      <div class="title">顾问绩效统计数</div>
      <el-date-picker
        class="date-box"
        v-model="monthRange"
        type="monthrange"
        size="small"
        range-separator="-"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        value-format="yyyy-MM-dd"
        :clearable="false"
        :picker-options="pickerOptions"
        @change="handleChangeMonth"
      >
      </el-date-picker>
    </div>
    <div class="content">
      <div ref="cardRef" :class="['performance']">
        <div
          class="performance-item"
          v-for="(item, index) in performDataList"
          :key="index"
        >
          <div class="up">
            <div :class="['bgc', `name-bgc-${index % 4}`]"></div>
            <span class="name">{{ item.title }}</span>
          </div>
          <div class="down">
            <span class="value">{{ item.value || "-" }}</span>
            <span class="unit">{{ item.unit || "" }}</span>
          </div>
        </div>
      </div>
      <div class="task-visit-trend">
        <div class="left">
          <div class="title pb21">绩效维度趋势</div>
          <div class="left-content">
            <el-form
              :model="form"
              class="demo-form-inline"
              label-position="left"
              label-width="70px"
              size="small"
            >
              <el-form-item label="维度筛选" label-width="85px">
                <el-select
                  style="width: 300px"
                  v-model="form.dimension"
                  placeholder="请选择维度"
                  clearable
                  @change="handleChangeDimension"
                >
                  <el-option
                    v-for="item in dimensionList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="chart-box">
              <BarChart
                v-if="xData"
                :xData="xData"
                :yData="yData"
                :height="chartHeight < 400 ? 400 : chartHeight"
                :dimension="form.dimension"
              ></BarChart>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title-box">
            <div class="title">顾问排行榜</div>
          </div>
          <div
            class="right-content-box"
            :style="{
              height: chartHeight < 400 ? '500px' : chartHeight + 101 + 'px',
            }"
          >
            <div class="right-content" style="height: calc(100%-64px)">
              <div
                :class="[`num${index + 1}`, 'num']"
                v-for="(item, index) in fontRankList"
                :key="index"
              >
                <div class="name">{{ item.consultantName }}</div>
                <img
                  :src="item.consultantPic ? item.consultantPic : defaultAvatar"
                  class="avatar"
                  alt=""
                />
              </div>
              <el-scrollbar
                class="rank-list"
                :style="{
                  height:
                    chartHeight < 400 ? '275px' : chartHeight - 130 + 'px',
                }"
              >
                <div
                  class="rank-list-item"
                  v-for="(item, index) in rankList"
                  :key="index"
                >
                  <span class="sort">{{ index + 4 }}</span>
                  <img
                    class="pic"
                    :src="
                      item.consultantPic ? item.consultantPic : defaultAvatar
                    "
                    alt=""
                  />
                  <span class="username">{{ item.consultantName }}</span>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import defaultAvatar from "@/assets/images/defaultAvatar.png";
import {
  getFirstDay,
  getLastDay,
  getLastMonthFirstDay,
  getLastMonthLastDay,
} from "@/utils/getNDate.js";
import { board, consultantRank, reply, score } from "@/api";
export default {
  components: {
    BarChart: () => import("./components/BarChart.vue"),
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          const date1 = new Date("2024-01-01");
          const date2 = new Date(
            new Date().getFullYear() +
              "-" +
              ("0" + (new Date().getMonth() + 1)).substr(-2) +
              "-" +
              ("0" + new Date().getDate()).substr(-2)
          );
          const diff = date2 - date1 + 60 * 60 * 24 * 1000;
          return (
            time.getTime() < Date.now() - diff || Date.now() < time.getTime()
          );
        },
      };
    },
  },
  data() {
    return {
      arrowDirection: "arrow-down",
      defaultAvatar: defaultAvatar,
      chartHeight: window.innerHeight - 730,
      monthRange: [],
      form: {
        dimension: "1",
      },
      cardHeight: "auto",
      performDataList: [],
      rankList: [],
      dimensionList: [
        { name: "顾问系统评分", value: "1" },
        { name: "顾问及时率", value: "2" },
      ],
      fontRankList: [],
      yData: [],
      xData: [],
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getDefaultDay();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  mounted() {
    this.getHeight();
  },
  methods: {
    scoreFn(params) {
      score(params).then((res) => {
        if (res.code == 200) {
          const xTemp = [],
            yTemp = [];
          res.data.forEach((item) => {
            xTemp.push(item.xTitle);
            yTemp.push(item.yValue);
          });
          this.xData = xTemp;
          this.yData = yTemp;
        }
      });
    },
    replyFn(params) {
      reply(params).then((res) => {
        if (res.code == 200) {
          const xTemp = [],
            yTemp = [];
          res.data.forEach((item) => {
            xTemp.push(item.xTitle);
            yTemp.push(item.yValue);
          });
          this.xData = xTemp;
          this.yData = yTemp;
        }
      });
    },
    consultantRankFn(params) {
      consultantRank(params).then((res) => {
        if (res.code == 200) {
          this.fontRankList = res.data.slice(0, 3);
          this.rankList = res.data.slice(3);
        }
      });
    },
    handleChangeMonth(val) {
      const year = val[1].slice(0, 4);
      const month = val[1].slice(5, 7);
      const lastDay = this.getLastDay(year, month);
      const params = {};
      params.startTime = val[0] + " 00:00:00";
      params.endTime = val[1].slice(0, 7) + "-" + lastDay + " 23:59:59";
      this.boardFn(params);
      this.consultantRankFn(params);
      this.form.dimension == 1 ? this.scoreFn(params) : this.replyFn(params);
    },
    getLastDay(year, month) {
      const date = new Date(year, month, 0);
      return date.getDate();
    },
    getDefaultDay() {
      const date = new Date();
      const today = date.getDate();
      const params = {};
      // 过了5号就默认当月，否则默认上个月
      if (today > 5) {
        const firstDay = getFirstDay();
        const lastDay = getLastDay();
        this.$set(this.monthRange, 0, firstDay);
        this.$set(this.monthRange, 1, lastDay);
        params.startTime = firstDay + " 00:00:00";
        params.endTime = lastDay + " 23:59:59";
      } else {
        const firstDay = getLastMonthFirstDay();
        const lastDay = getLastMonthLastDay();
        this.$set(this.monthRange, 0, firstDay);
        this.$set(this.monthRange, 1, lastDay);
        params.startTime = firstDay + " 00:00:00";
        params.endTime = lastDay + " 23:59:59";
      }
      this.boardFn(params);
      this.consultantRankFn(params);
      this.form.dimension == 1 ? this.scoreFn(params) : this.replyFn(params);
    },
    handleChangeDimension(val) {
      const year = this.monthRange[1].slice(0, 4);
      const month = this.monthRange[1].slice(5, 7);
      const lastDay = this.getLastDay(year, month);
      const params = {};
      params.startTime = this.monthRange[0] + " 00:00:00";
      params.endTime =
        this.monthRange[1].slice(0, 7) + "-" + lastDay + " 23:59:59";
      val == 1 ? this.scoreFn(params) : this.replyFn(params);
    },
    boardFn(params) {
      board(params).then((res) => {
        if (res.code == 200) {
          this.performDataList = res.data;
        }
      });
    },
    getHeight() {
      this.chartHeight = window.innerHeight - 420;
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "D-DIN-PRO-800-ExtraBold"; /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-800-ExtraBold.ttf");
}
.wrapper {
  width: 100%;
  height: 100%;
  background: url("../../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 0 24px 12px 24px;
  .title {
    font-size: 22px;
    font-weight: 600;
    color: #222222;
    padding-left: 8px;
  }
  .header {
    overflow: hidden;
    padding: 12px 27px 17px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .date-box {
      width: 400px;
      border-radius: 6px;
      overflow: hidden;
      height: 36px;
      position: fixed;
      left: calc(50% + 100px);
      transform: translateX(-50%);
      top: 56px;
      z-index: 999;
      box-shadow: 0px 2px 8px 0px rgba(141, 155, 185, 0.3);
    }
  }
  .content {
    position: relative;
    .performance {
      display: grid;
      grid-gap: 16px;
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      overflow: hidden;
      &-item {
        flex-shrink: 0;
        padding: 16px 14px;
        border-radius: 4px;
        background-color: #f5f6f7;
        .up {
          display: flex;
          align-items: center;
          .bgc {
            width: 5px;
            height: 13px;
            border-radius: 2px;
            margin-right: 7px;
          }
          .name-bgc-0 {
            background: #3589ff;
          }
          .name-bgc-1 {
            background: #26c689;
          }
          .name-bgc-2 {
            background: #735aff;
          }
          .name-bgc-3 {
            background: #ffa158;
          }
          .name {
            font-size: 15px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #657184;
          }
          .count-box {
            margin-top: 22px;
            display: flex;
            justify-content: space-between;
            .click-num {
              .click-title {
                font-size: 15px;
                color: #8896ac;
                margin-bottom: 8px;
              }
              .num {
                font-size: 24px;
                font-family: D-DIN-PRO-800-ExtraBold;
                font-weight: 600;
                text-align: center;
                color: #2a3455;
              }
            }
          }
        }

        .down {
          margin-top: 10px;
          .value {
            font-size: 24px;
            font-family: D-DIN-PRO-800-ExtraBold;
            font-weight: 600;
            color: #2a3455;
            margin-right: 8px;
          }
          .unit {
            font-size: 12px;
            font-weight: 400;
            color: #8896ac;
          }
        }
      }
    }
    .task-visit-trend {
      display: flex;
      margin-top: 40px;
      .pb21 {
        padding-bottom: 21px;
      }
      .left {
        flex: 1;
        margin-right: 24px;
        &-content {
          padding: 24px;
          border-radius: 8px;
          background: #ffffff;
          .tag {
            padding: 8px 16px;
            border-radius: 18px;
            font-size: 14px;
            color: #555;
            border: 1px solid #d2d5e1;
            cursor: pointer;
            &.active {
              background: #e5e4ea;
              color: #222222;
              border: 1px solid #e5e4ea;
            }
            &:not(:last-child) {
              margin-right: 14px;
            }
          }
        }
        .chart-box {
          margin-top: 20px;
        }
      }
      .right {
        width: 326px;
        .title-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 21px;
        }
        .right-content-box {
          border-radius: 8px;
          background: #cbf1f2;
        }
        &-content {
          border-radius: 8px;
          height: 100%;
          background: url("../../../assets/images/consultantRankBg.png")
            no-repeat;
          background-position: center top;
          background-size: 100% 520px;
          padding: 32px 21px 0 21px;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .num {
            position: absolute;
            text-align: center;
            width: 110px;
            .name {
              font-size: 15px;
              font-weight: 600;
              color: #0084b1;
              margin-bottom: 8px;
            }
            .avatar {
              width: 40px;
              height: 40px;
              border: 2px solid #ffffff;
              border-radius: 50%;
            }
          }
          .num2 {
            left: 27px;
            top: 64px;
          }
          .num1 {
            left: 122px;
            top: 36px;
          }
          .num3 {
            right: 5px;
            top: 108px;
          }

          .rank-list {
            padding: 22px 0 0 24px;
            height: 269px;
            border-radius: 10px 10px 0 0;
            border: 1px solid #fff;
            border-bottom: none;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.3);
            &-item {
              display: flex;
              align-items: center;
              color: #2082b3;
              font-size: 14px;
              &:not(:last-child) {
                margin-bottom: 20px;
              }
              .pic {
                margin: 0 12px 0 21px;
                border-radius: 50%;
                width: 30px;
                height: 30px;
              }
            }
          }
        }
      }
    }
  }
}
/deep/ .el-date-editor {
  background-color: #fafbfe;
  font-family: PingFangSC, PingFang SC;
  color: #555555;
}
/deep/ .el-input__inner {
  background-color: #fafbfe;
}
/deep/ .el-row {
  display: flex;
}
/deep/ .el-range-editor .el-range-input {
  background-color: #fafbfe;
}
</style>
